<template>
  <div class="account-container">
    <!-- 订单数据可视化 -->
    <div class="account-visualization">
      <div class="title">账单统计</div>
      <div class="account-content">
        <div class="account-data"></div>
        <div class="account-show" ref="main"></div>
      </div>
    </div>
    <!-- 订单列表 -->
    <div class="account-list">
      <div class="title">账单列表</div>
      <div class="table-content">
        <el-table :data="tableData.list" border style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection"> </el-table-column>
          <el-table-column prop="id" label="账单编号" width="180" />
          <el-table-column prop="orderId" label="订单编号" width="180" />
          <el-table-column prop="accountTotal" label="账单总额" />
          <el-table-column prop="paymentTime" label="到账时间" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="router.push('/home/account/info/' + scope.row.id)">查看详情</el-button>
              <el-button size="small" type="danger" :loading="scope.row.loading" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagination"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background> </el-pagination></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'
import {} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import axios from '@/utils/request.js'

// 创建路由对象
const router = useRouter()

let total = ref(0)
let pageSize = ref(5)
let currentPage = ref(1)

const main = ref(null)
let tableData = reactive({ list: [] })
let alAccountList = reactive([])
const option = reactive({
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
})

// 处理请求到的表格数据
const dealAccountData = () => {
  for (let i = (currentPage.value - 1) * 5; i < currentPage.value * pageSize.value; i++) {
    if (alAccountList[i]) {
      const date = new Date(alAccountList[i].payment_time)
      tableData.list.push({
        id: alAccountList[i].id,
        orderId: alAccountList[i].order_id,
        accountTotal: '￥' + alAccountList[i].account_price,
        paymentTime: date.toLocaleDateString() + ' ' + date.toLocaleTimeString(),
        loading: false
      })
    } else {
      break
    }
  }
}

// 表格选中处理函数
const handleSelectionChange = (val) => {
  multipleSelection = val
}

// 切换页数
const handleCurrentChange = (val) => {
  currentPage.value = val
  tableData.list = []
  // 根据当前页和每一页长度进行数据渲染
  dealAccountData()
}

// 切换每一页显示的长度
const handleSizeChange = (val) => {
  pageSize.value = val
  tableData.list = []
  // 根据当前页和每一页长度进行数据渲染
  dealAccountData()
}

// 创建图标
const createImageTable = () => {
  let myChartDom
  if (myChartDom) {
    myChartDom.dispose()
  }
  myChartDom = echarts.init(main.value)
  option && myChartDom.setOption(option)
  // 自适应品目大小
  window.onresize = () => {
    myChartDom.resize()
  }
}

// 获取商家账单数据列表
const getAccountList = async () => {
  try {
    const data = await axios.get('/bus/get/account/list')
    if (data.code === 0) {
      // 获取成功
      ElMessage({
        type: 'success',
        message: data.msg
      })
      total.value = data.data.length
      alAccountList = data.data
      dealAccountData()
    } else if (data.code === 403 || data.msg === '身份认证错误') {
      ElMessage({
        type: 'error',
        message: data.msg
      })
      localStorage.removeItem('bus_token')
      router.replace('/login')
    } else {
      ElMessage({
        type: 'error',
        message: data.msg
      })
    }
  } catch (err) {
    ElMessage.error('请求失败！')
  }
}

const indexMethod = (index) => {
  return index * 2
}
getAccountList()
onMounted(() => createImageTable())
</script>

<style lang="scss" scoped>
.account-container {
  padding: 50px;
  .account-list {
    border: 1px solid #e1e1e1;
    border-bottom-width: 0;
    margin-top: 30px;

    .title {
      padding: 15px;
      background-color: #f2f6fc;
      font-weight: 700;
      color: #606060;
    }

    :deep(.el-table .el-table__cell) {
      text-align: center;
    }
  }
  .account-visualization {
    border: 1px solid #e1e1e1;

    .title {
      padding: 15px;
      background-color: #f2f6fc;
      font-weight: 700;
      color: #606060;
    }

    .account-content {
      display: flex;
      height: 500px;

      .account-data {
        flex: 15;
        background-color: #f1e2c7;
      }
      .account-show {
        flex: 85;
      }
    }
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
  }
}
</style>
